<template>
	<view class="payment" v-if="visible">
		<view class="-bg"></view>
		<view class="-inner">支付中...</view>
	</view>
</template>

<script>
	import PaymentApi from '@/api/payment/payment.js';
	import Payment from '@/utils/platform/payment/index.js';
	//付款组件，全端通用
	//@group 全局组件
	export default {
		name: 'payment',
		//
		data() {
			return {
				//
				paymentId: '',
				//定时器
				timer: null
			};
		},
		//
		props: {
			//付款对象
			paymentPrepare: {
				type: Object,
				default () {
					return {};
				}
			},
			//是否显示支付弹窗（.sync模式）
			visible: {
				type: Boolean,
				default: false
			},
		},
		//
		watch: {
			visible: function() {
				if (this.visible && this.paymentPrepare) {
					this.initPlatfrom();
					this.prepare();
				}
			}
		},
		//
		methods: {
			//初始化平台
			initPlatfrom() {
				Payment.init(this.$settings.platform);
			},
			//准备发起支付，从服务器换取支付字符串
			prepare: async function() {
				const {
					paymentMethodId,
					orderId,
					appId,
					paymentMethodName,
					platform
				} = this.paymentPrepare
				//
				try {
					let res = await PaymentApi.prepare(paymentMethodId, orderId, appId, paymentMethodName, platform);
					console.log('【PaymentApi:', res)
					if (res.success) {
						let prepare = res.obj;
						//
						this.paymentId = prepare.paymentId
						//
						if (prepare.needPay) {
							let payJson = JSON.parse(prepare.options);
							Payment.pay(payJson).then(res => {
								this.check();
							}).catch(err => {
								console.error('【payment:prepare:pay】:', err)
								this.doCancel();
							})
						} else {
							this.doSuccess();
						}
					} else if(res.code == 1004002){
						this.doSuccess();
					}else{
						console.log('【支付失败，缺少参数】:', res.msg)
						this.doCancel();
					}
				} catch (err) {
					console.error('【payment:prepare】:', err)
					this.doCancel();
				}
			},
			//检查支付回调
			check: function(option) {
				if (this.timer != null) {
					clearTimeout(this.timer);
				}
				this.timer = setTimeout(() => {
					this.doCheck();
				}, 2000);
			},
			//确认支付回调
			doCheck: function() {
				PaymentApi.check(this.paymentId).then(res => {
					// console.log(res);
					if (res.success && res.obj) {
						this.doSuccess();
					} else if (!res.obj) {
						this.check();
					} else {
						this.doCancel();
					}
				}).catch(err => {
					this.check();
				});
			},
			//支付成功
			doSuccess: function() {
				this.$app.success('支付成功！', () => {
					this.$emit('update:visible', false);
					//支付成功回调
					//@arg 向父组件传递boolean值，成功返回true，失败返回false
					this.$emit('pay:result', true);
				});
			},
			//支付失败
			doCancel: function() {
				this.$app.error('支付失败！', () => {
					this.$emit('update:visible', false);
					//支付失败回调
					//@arg 向父组件传递boolean值，成功返回true，失败返回false
					this.$emit('pay:result', false);
					if (this.timer != null) {
						clearTimeout(this.timer);
					}
				});
			},
		},
		//
		beforeDestroy() {
			if (this.timer != null) {
				clearTimeout(this.timer);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.payment {
		position: fixed;
		right: 0;
		left: 0;
		bottom: 0;
		top: 0;
		z-index: 1;
		display: flex;
		justify-content: center;
		align-items: center;

		.-bg {
			position: absolute;
			right: 0;
			left: 0;
			bottom: 0;
			top: 0;
			z-index: 1;
			background-color: #000;
			opacity: 0.5;
		}

		.-inner {
			z-index: 2;
			position: relative;
			background-color: #fff;
			padding: 20rpx;
		}
	}
</style>